<template>
  <div
    v-if="!remove"
    class="dialog flex flex-align-center flex-pack-center"
    :class="{ mask: mask, ...parentClassObj }"
    :style="style"
  >
    <div class="animate__fast" :class="classObj" :style="style">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //是否显示
    show: {
      type: Boolean,
      default: false
    },
    //是否启用动画
    animate: {
      type: Boolean,
      default: true
    },
    //自定义动画时长
    direction: {
      type: Number | Boolean,
      default: false
    },
    //是否需要背景蒙层
    mask: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      classObj: {
        animate__animated: this.animate,
        animate__fadeOutUp: false,
        animate__fadeInDown: false
      },
      parentClassObj: {
        animate__animated: this.animate,
        animate__fadeOut: false,
        animate__fadeIn: false
      },
      remove: true
    };
  },
  computed: {
    style() {
      if (this.direction === false) return {};
      else return { animationDuration: this.direction + "ms" };
    }
  },
  watch: {
    show: {
      handler: function(newval, oldval) {
        if (newval === oldval) return;
        this.taggle(newval);
      },
      immediate: true
    }
  },
  methods: {
    taggle(newval) {
      if (newval) {
        this.remove = false;
        this.classObj.animate__fadeOutUp = false;
        this.classObj.animate__fadeInDown = true;
        this.parentClassObj.animate__fadeOut = false;
        this.parentClassObj.animate__fadeIn = true;
      } else {
        this.classObj.animate__fadeInDown = false;
        this.classObj.animate__fadeOutUp = true;
        this.parentClassObj.animate__fadeIn = false;
        this.parentClassObj.animate__fadeOut = true;
        if (this.animate) {
          setTimeout(() => {
            this.remove = true;
          }, 800);
        } else {
          this.remove = true;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "./css/animate.css";
.dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
  background-color: transparent;
  pointer-events: none;
  &.mask {
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
  }
  & > div {
    pointer-events: auto;
  }
}
</style>
